<template>
  <div>
    <el-button link @click="showDialog = true">多级关联</el-button>

    <drag-dialog
      v-model="showDialog"
      title="多级关联"
      width="50%"
      @close="closeDialog"
      :close-on-click-modal="false"
    >
      <div style="max-height: 600px; overflow: auto">
        <el-row
          v-for="(item, index) in data.dicData"
          :key="index"
          style="margin-bottom: 10px; padding: 10px; border-bottom: 1px solid #eee"
        >
          <el-col :span="4">{{ item.label }}</el-col>
          <!-- 子项关联 -->
          <el-col :span="20">
            <div v-for="(childItem, childIndex) in item.connectChild" :key="childIndex">
              <el-row>
                <el-col :span="24">
                  <div style="display: flex">
                    <el-select
                      style="width: 200px"
                      v-model="childItem.childprop"
                      @change="childSelectLabel(childItem)"
                      clearable
                    >
                      <el-option
                        v-for="(comp, idx) in childConnect"
                        :key="idx"
                        :label="comp.label"
                        :value="comp.prop"
                      />
                    </el-select>

                    <el-select style="width: 300px" v-model="childItem.childValue" multiple>
                      <el-option
                        v-for="(comp, idx) in childItem.childdataList"
                        :key="idx"
                        :label="comp.label"
                        :value="comp"
                      />
                    </el-select>

                    <div @click="addConnect(data.dicData, index)">
                      <el-icon style="color: #3cc393; font-size: 30px; margin: 0px 10px"
                      ><CirclePlus
                      /></el-icon>
                      <!-- <i
                        class="el-icon-circle-plus-outline"
                        style="color: #3cc393; font-size: 30px; margin: 0px 10px"
                      ></i> -->
                    </div>
                    <div
                      v-if="item.connectChild.length > 1"
                      @click="deleteConnect(data.dicData, index, childIndex)"
                    >
                      <el-icon style="color: red; font-size: 30px"><Remove /></el-icon>
                      <!-- <i class="el-icon-remove-outline" style="color: red; font-size: 30px"></i> -->
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showDialog = false">取 消</el-button>
          <el-button type="primary" @click="closeDialog">确 定</el-button>
        </span>
      </template>
    </drag-dialog>
  </div>
</template>
<script>
import { findCompByProp } from '@code/components/anvil-code-low-common/utils/common-methods'
import { cloneDeep } from 'lodash-es'

export default {
  props: {
    data: {
      type: Object,
      default: () => {}
    },
    notSavedOptions: {
      type: Array,
      default: () => []
    },
    formJson: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      showDialog: false,
      localData: {}
      // optionRef: [],
    }
  },
  computed: {
    childConnect() {
      let children = []
      if (this.formJson && this.formJson.column) {
        const { prop, parentName } = this.data
        // 处理是否为子表单内部组件
        if (this.data.parentName) {
          const comps = []
          findCompByProp(comps, parentName, this.formJson.column)
          if (comps && comps.length) {
            const { column } = comps[0].children
            children = column.filter(
              (item) =>
                (item.type == 'select' || item.type == 'checkbox' || item.type == 'radio') &&
                prop != item.prop
            )
          }
        } else {
          children = this.formJson.column.filter(
            (item) =>
              (item.type == 'select' || item.type == 'checkbox' || item.type == 'radio') &&
              prop != item.prop
          )
        }
      }
      return children
      // return child
      // if (this.data.connectParent) {
      //   let newChid = this.filterHasSameArr(child, this.data.connectParent);
      //   if (!newChid.length) this.$set(this.data, "hasParent", "N");
      //   return newChid;
      // } else {
      //   return child;
      // }
    }
  },
  watch: {
    data: {
      handler(newVal) {
        if (newVal) {
          this.localData = newVal
        }
      },
      deep: true,
      immediate: true
    },
    localData: {
      handler(newVal) {
        this.$emit('update:data', newVal)
      },
      deep: true
    },
    notSavedOptions: {
      handler() {
        console.log('变了')
      },
      deep: true
    },
    'formJson.column': {
      handler() {
        console.log('变了')
      },
      deep: true
    }
  },
  methods: {
    filterHasSameArr(arr1, arr2) {
      return arr1.filter((item) => {
        if (arr2.indexOf(item.prop) < 0) {
          return item
        }
      })
    },
    closeDialog() {
      // this.data.copyDicData = JSON.parse(JSON.stringify(this.data.dicData));
      this.showDialog = false
    },
    addConnect(item, index) {
      let childConnect = {
        childLabel: '',
        childprop: ''
      }
      item[index].connectChild.push(childConnect)
      console.log(item, index)
    },
    deleteConnect(item, index, idx) {
      item[index].connectChild.splice(idx, 1)
    },
    childSelectLabel(data) {
      console.log(data)
      data.childValue = []
      if (this.data.parentName) {
        const dynamic = this.formJson.column.find((col) => col.prop == this.data.parentName)
        dynamic.children.column.forEach((item) => {
          if (item.prop == data.childprop) {
            const dicDataClone = cloneDeep(item.dicData)
            data.childdataList = dicDataClone
            item.copyDicData = item.dicData
          }
        })
      } else {
        this.formJson.column.forEach((item) => {
          if (item.prop == data.childprop) {
            const dicDataClone = cloneDeep(item.dicData)
            data.childdataList = dicDataClone
            item.copyDicData = item.dicData
          }
        })
      }
    },
    childSelectValue(data) {
      console.log(data)
    }
  }
}
</script>
